<template>
  <div>
    <div class="tuijian-title">热销推荐</div>
    <ul>
      <router-link
        tag="li"
        class="biao border-bottom"
        v-for="item in tuijian"
        :key="item.id"
        to="/detail"
      >
        <img class="biao-img" :src="item.imgUrl" />

        <div class="biao-info">
          <p class="biao-title">{{ item.address }}</p>
          <p class="biao-miaoshu">{{ item.name }}</p>
          <button class="biao-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeTuijian",
  props: {
    tuijian: Array,
  },
};
</script>

<style lang="stylus" scoped>
@import "~style/mixins.styl"
.tuijian-title
	background-color :#ccc
	margin-top :.2rem
	line-height :.4rem
	text-align :left
	text-indent :.2rem
	width :100%
.biao
	display :flex
	overflow :hidden
	height :1.9rem
.border-bottom
	margin-top :.1rem
	.biao-img
		width 1.7rem
		height 1.7rem
		padding .1rem
.biao-info
	min-width 0
	flex 1
	padding .1rem
	overflow: hidden;
	.biao-title
		line-height .54rem
		font-size .32rem
		text-align left
		buhuanhang()
	.biao-miaoshu
		line-height .4rem
		color #ccc
		buhuanhang()
	.biao-button
		background rgb(48,136,241)
		line-height .44rem
		color #ffffff
		padding 0 .2rem
		border-radius .06rem
		margin-top .2rem

		float left
</style>
